
<style lang="less" scoped>
    .add-fans{
        border-radius: 5px;
        padding: 0 20px 20px;
        .fans-list{
            background-color: #f8f8f8;
            .fans-item{
                width: 100%;
                border: solid 1px #e5e5e5;
                background: #fff;
                margin-top: 20px;
                padding: 20px;
                border-radius: 3px;
                .works{
                    height: 110px;
                    background-color: #f8f8f8;
                    .poster{
                        display: block;
                        width: 70px;
                        height: 90px;
                        background-color: #d8d8d8;
                        margin: 10px;
                        float: left;
                    }
                }
                .works-info{
                    float: left;
                    text-align: left;
                    margin: 5px 0;
                }
                .comments{
                    height: 110px;
                    margin-left: 90px;
                }
                .id-card{
                    margin: 10px;
                    .icon{
                        display: block;
                        width: 34px;
                        height: 34px;
                        background-color: #d8d8d8;
                        border-radius: 50%;
                        float: left;
                    }
                    div{
                        float: left;
                        margin-left: 10px;
                        p{
                            height: 22px;
                            font-size: 16px;
                            color: #222222;
                        }
                        span{
                            height: 17px;
                            font-size: 12px;
                            color: #666666;
                        }
                    }
                }
                .content{
                    margin:14px 0 0 54px;
                    p{
                        height: 20px;
                        font-size: 14px;
                        color: #222222;
                    }
                    span{
                        height: 17px;
                        font-size: 12px;
                        color: #666666;
                    }
                }
                .reply{
                    height: 100px;
                    margin-left:144px;
                    input{
                        width: 100%;
                        height: 50px;
                        border: 1px solid #e5e5e5;
                        border-radius: 5px;
                        padding-left: 10px;
                        font-size: 14px;
                    }
                    .submit{
                        width: 66px;
                        height: 25px;
                        font-size: 18px;
                        color: #409eff;
                        margin:28px 0 28px 45%;
                        display: inline-block;
                        cursor: pointer;
                        i{
                            margin-right: 10px;
                        }
                    }
                    .ignore{
                        width: 28px;
                        height: 20px;
                        margin: 32px 8px;
                        font-size: 14px;
                        color: #acacac;
                        cursor: pointer;
                        float: right;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="add-fans page-view">
        <div class="fans-list">
            <div class="fans-item" v-for="(item,key) in fansList" :key="key">
                <div class="works">
                    <img :src="item.poster" class="poster" alt="">
                    <div class="works-info">
                        <div class="id-card clearfix">
                            <img :src="item.icon" class="icon" alt="">
                            <div>
                                <p>{{item.name}}</p>
                                <span>{{item.id}}</span>
                            </div>
                        </div>
                        <div class="content">
                            <p>{{item.production}}</p>
                            <span>{{item.time}}</span>
                        </div>
                    </div>
                </div>
                <div class="comments" v-for="(comments,index) in item.interactive" :key="index">
                    <div class="works-info">
                        <div class="id-card clearfix">
                            <img :src="comments.icon" class="icon" alt="">
                            <div>
                                <p>{{comments.name}}</p>
                                <span>{{comments.id}}</span>
                            </div>
                        </div>
                        <div class="content">
                            <p>{{comments.production}}</p>
                            <span>{{comments.time}} {{comments.source}}</span>
                        </div>
                    </div>
                </div>
                <div class="reply">
                    <input type="text" value="" placeholder="请输入回复内容">
                    <div class="submit"><i class="el-icon-s-promotion"></i>评论</div><span class="ignore">忽略</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'add-fans',
    data() {
        return {
            fansList:[
                {
                    id:'@bgsbwl',
                    name:'昵称1',
                    icon:'http://file02.16sucai.com/d/file/2014/1124/68d1ffe81ad8f4fc84d580be7b556521.jpg',
                    poster:'http://img.blog.163.com/photo/LeZXlWSaP6mVCgJS_5BV8Q==/1993968735018503720.jpg',
                    production:'作品1作品1作品1作品1作品1作品1作品1作品1作品1作品1',
                    time:'2019-10-12 18:30:01',
                    interactive:[
                        {
                            id:'@bgsbwl',
                            name:'待回复1',
                            production:'评论评论评论评论评论评论评论评论评论评论',
                            icon:'http://file02.16sucai.com/d/file/2014/1124/68d1ffe81ad8f4fc84d580be7b556521.jpg',
                            time:'2019-10-12 18:30:01',
                            source:'因评论相关视频推荐',
                        }
                    ]
                },{
                    id:'@qwertwerty',
                    name:'昵称2',
                    icon:'http://file02.16sucai.com/d/file/2014/1124/68d1ffe81ad8f4fc84d580be7b556521.jpg',
                    poster:'http://img.blog.163.com/photo/LeZXlWSaP6mVCgJS_5BV8Q==/1993968735018503720.jpg',
                    production:'作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2作品2',
                    time:'2019-10-12 18:30:01',
                    interactive:[
                        {
                            id:'@bgsbwl',
                            name:'办公室不无聊',
                            icon:'http://file02.16sucai.com/d/file/2014/1124/68d1ffe81ad8f4fc84d580be7b556521.jpg',
                            production:'作品作品作品作品作品作品作品作品作品',
                            time:'2019-10-12 18:30:01',
                            source:'因评论相关视频推荐',
                        }
                    ]
                }
            ]
        }
     }
}
</script>
